<!doctype html>
<html>
    <head>

        <title>jsPlumb - perimeter anchors demonstration</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
        <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
        <link href="//fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">

        <link rel="stylesheet" href="node_modules/@jsplumb/browser-ui/css/jsplumbtoolkit.css">
        <link rel="stylesheet" href="../demo.css">
    </head>
    <body>

        <div class="jtk-demo-main">
            <!-- demo -->
            <div class="jtk-demo-canvas canvas-wide perimeter-demo jtk-surface jtk-surface-nopan" id="canvas">
                <div class="shape" data-shape="Rectangle">Rectangle</div>
                <div class="shape" data-shape="Ellipse">Ellipse</div>
                <div class="shape" data-shape="Circle">Circle</div>
                <div class="shape" data-shape="Diamond">Diamond</div>
                <div class="shape" data-shape="Triangle" style="left:700px;top:380px;">Triangle</div>
                <div class="shape _90" data-shape="Triangle" data-rotation="90" style="left:60px;top:500px;">90&#176; rotation</div>
            </div>
            <!-- /demo -->
            <!-- explanation -->
            <div class="description">
                <h4>PERIMETER ANCHORS</h4>
                <p>These are anchors that track the perimeter of some shape.</p>
            </div>
            <!-- /explanation -->
        </div>


        <!-- JS -->        
        <script src="node_modules/@jsplumb/browser-ui/js/jsplumb.browser-ui.umd.js"></script>
        <!-- /JS -->

		<!--  demo code -->
		<script src="demo.js"></script>

    </body>
</html>
